<template>
  <!--咨询费、管理费、风险金、提前结清费、罚费（违约金）、罚费（滞纳金）、杂费、平台费、还款参数 公用-->
  <Card class="zxf page-fill" style="height:900px">
    <div class="table-data" style="">
      <v-table :columns="columns1" :data="data1"></v-table>
      <div class="bottom-container">
        <div class="left-bottom-form" v-if="!$route.meta.isFromCheck">
          <v-form inline>
            <v-form-item>
              <v-button size="small" type="primary" @on-click="handleRouteGo(path+'editor?type=0')">新建</v-button>
            </v-form-item>
            <v-form-item>
              <v-select v-model="currentSelect" :select-list="optionsData"></v-select>
            </v-form-item>
            <v-form-item>
              <v-input></v-input>
            </v-form-item>
            <v-form-item>
              <v-button size="small" type="primary" @on-click="queryPage()">筛选</v-button>
            </v-form-item>
          </v-form>
        </div>
      </div>
    </div>
    <div class="pagi-box">
      <v-pagination :total="total2" :current-page="currentPage2" :page-size="pageSize2" @on-page-change="handlePageChange2">
      </v-pagination>
    </div>
  </Card>
</template>

<script>

export default {
  data () {
    return {
      gdh: '',
      currentSelect: '',
      optionsData: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      columns1: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '描述',
          key: 'ms'
        },
        {
          title: '状态',
          key: 'zt'
        },
        {
          title: '操作',
          render: function (h) {
            const vm = this
            return h('div', {}, [
              h('v-button', {
                props: {
                  type: 'text'
                },
                style: {
                  fontSize: '12px'
                },
                on: {
                  'on-click' () {
                    vm.$router.push(vm.path + 'editor')
                  }
                }
              }, '查看'),
              !vm.$route.meta.isFromCheck && h('v-button', {
                props: {
                  type: 'text'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  'on-click' () {
                    vm.$router.push(vm.path + 'editor?type=1')
                  }
                }
              }, ' 编辑'),
              !vm.$route.meta.isFromCheck && h('v-button', {
                props: {
                  type: 'text'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                }
              }, ' 删除')
            ])
          }.bind(this)
        }
      ],
      data1: [
        {
          id: '666',
          ms: '666的操作'
        }
      ],
      total2: 1200,
      currentPage2: 1,
      pageSize2: 20
    }
  },
  computed: {
    path () {
      return this.$route.path
    }
  },
  created () {
  },
  methods: {
    handlePageChange2 (index) {
      this.currentPage2 = index
    },
    handleRouteGo (pathName) {
      this.$router.push(pathName)
    },

    queryPage: function () {
      // console.log(this.path);
      // 产品系统模块基路径
      const vm = this
      this.$ajax({
        method: 'post',
        url: baseUrl + 'product/param/riskfee/list'
      }).then(function (res) {
        // console.log(res.data)
        vm.data1 = res.data
      }).catch(function (err) { })
    }

  }
}
</script>

<style lang="less">
.ll {
}
</style>
